<template>
  <div class="flow-container">
    <div class="personal-container">
      <div class="personal-left">
        <div class="section-header">
          <div class="header-icon">
            <svg viewBox="0 0 24 24" class="icon">
              <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"/>
            </svg>
          </div>
          <h2>个人信息</h2>
          <div class="header-decoration">
            <div class="floating-dots">
              <div class="dot dot-1"></div>
              <div class="dot dot-2"></div>
              <div class="dot dot-3"></div>
              <div class="dot dot-4"></div>
              <div class="dot dot-5"></div>
            </div>
          </div>
        </div>
        <div class="personal-info-panel">
          <el-form :model="form" label-width="100px" class="personal-form">
            <el-form-item class="form-item-with-icon">
              <template #label>
                <div class="label-with-icon">
                  <svg viewBox="0 0 24 24" class="label-icon">
                    <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7.07,18.28C7.5,17.38 10.12,16.5 12,16.5C13.88,16.5 16.5,17.38 16.93,18.28C15.57,19.36 13.86,20 12,20C10.14,20 8.43,19.36 7.07,18.28M18.36,16.83C16.93,15.09 13.46,14.5 12,14.5C10.54,14.5 7.07,15.09 5.64,16.83C4.62,15.5 4,13.82 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,13.82 19.38,15.5 18.36,16.83M12,6C10.06,6 8.5,7.56 8.5,9.5C8.5,11.44 10.06,13 12,13C13.94,13 15.5,11.44 15.5,9.5C15.5,7.56 13.94,6 12,6M12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11Z"/>
                  </svg>
                  <span>昵称</span>
                </div>
              </template>
              <el-input v-model="form.nickname" maxlength="20" :disabled="!infoEditMode" class="custom-input" placeholder="请输入您的昵称">
                <template #prefix>
                  <el-icon class="input-prefix-icon"><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item class="form-item-with-icon">
              <template #label>
                <div class="label-with-icon">
                  <svg viewBox="0 0 24 24" class="label-icon">
                    <path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.11,4 20,4Z"/>
                  </svg>
                  <span>邮箱</span>
                </div>
              </template>
              <el-input v-model="form.email" disabled class="custom-input">
                <template #prefix>
                  <el-icon class="input-prefix-icon"><Message /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item class="form-item-with-icon">
              <template #label>
                <div class="label-with-icon">
                  <svg viewBox="0 0 24 24" class="label-icon">
                    <path d="M9,9C10.29,9 11.5,9.41 12.47,10.11L17.58,5H13V3H21V11H19V6.41L13.89,11.5C14.59,12.5 15,13.7 15,15A6,6 0 0,1 9,21A6,6 0 0,1 3,15A6,6 0 0,1 9,9M9,11A4,4 0 0,0 5,15A4,4 0 0,0 9,19A4,4 0 0,0 13,15A4,4 0 0,0 9,11Z"/>
                  </svg>
                  <span>性别</span>
                </div>
              </template>
              <el-radio-group v-model="form.gender" :disabled="!infoEditMode" class="custom-radio-group">
                <el-radio label="M" class="custom-radio">
                  <span class="radio-content">
                    <svg viewBox="0 0 24 24" class="radio-icon">
                      <path d="M9,9C10.29,9 11.5,9.41 12.47,10.11L17.58,5H13V3H21V11H19V6.41L13.89,11.5C14.59,12.5 15,13.7 15,15A6,6 0 0,1 9,21A6,6 0 0,1 3,15A6,6 0 0,1 9,9M9,11A4,4 0 0,0 5,15A4,4 0 0,0 9,19A4,4 0 0,0 13,15A4,4 0 0,0 9,11Z"/>
                    </svg>
                    男
                  </span>
                </el-radio>
                <el-radio label="F" class="custom-radio">
                  <span class="radio-content">
                    <svg viewBox="0 0 24 24" class="radio-icon">
                      <path d="M12,4A6,6 0 0,1 18,10C18,12.97 15.84,15.44 13,15.92V18H15V20H13V22H11V20H9V18H11V15.92C8.16,15.44 6,12.97 6,10A6,6 0 0,1 12,4M12,6A4,4 0 0,0 8,10A4,4 0 0,0 12,14A4,4 0 0,0 16,10A4,4 0 0,0 12,6Z"/>
                    </svg>
                    女
                  </span>
                </el-radio>
              </el-radio-group>
            </el-form-item>
            
            <el-form-item class="form-item-with-icon">
              <template #label>
                <div class="label-with-icon">
                  <svg viewBox="0 0 24 24" class="label-icon">
                    <path d="M9,2V8H7V22H9V16H15V22H17V8H15V2H9M11,4H13V6H11V4M11,8H13V10H11V8M11,12H13V14H11V12Z"/>
                  </svg>
                  <span>简介</span>
                </div>
              </template>
              <el-input v-model="form.bio" type="textarea" maxlength="100" :rows="3" :disabled="!infoEditMode" 
                        class="custom-textarea" placeholder="介绍一下自己吧～" />
            </el-form-item>
            
            <el-form-item class="form-item-with-icon">
              <template #label>
                <div class="label-with-icon">
                  <svg viewBox="0 0 24 24" class="label-icon">
                    <path d="M19,3H18V1H16V3H8V1H6V3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V8H19V19Z"/>
                  </svg>
                  <span>生日</span>
                </div>
              </template>
              <el-date-picker v-model="form.birthday" type="date" placeholder="选择您的生日" 
                              style="width: 100%;" :disabled="!infoEditMode" class="custom-date-picker" />
            </el-form-item>
            
            <el-form-item class="action-item">
              <el-button type="primary" class="action-btn edit-btn" @click="toggleInfoEdit">
                <span style="width:100%;display:flex;align-items:center;justify-content:center;">{{ infoEditMode ? '保存修改' : '编辑信息' }}</span>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        
        <div class="section-divider">
          <div class="divider-icon">
            <svg viewBox="0 0 24 24" class="icon">
              <path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.6 14.8,10V11H16V18H8V11H9.2V10C9.2,8.6 10.6,7 12,7M12,8.2C11.2,8.2 10.4,8.7 10.4,10V11H13.6V10C13.6,8.7 12.8,8.2 12,8.2Z"/>
            </svg>
          </div>
          <span>密码安全</span>
          <div class="divider-line"></div>
        </div>
        
        <div class="password-section">
          <div class="password-info">
            <div class="password-card">
              <div class="password-icon">
                <svg viewBox="0 0 24 24" class="icon">
                  <path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"/>
                </svg>
              </div>
              <div class="password-text">
                <h3>账户密码</h3>
                <p>定期更换密码有助于保护您的账户安全</p>
              </div>
              <el-button type="primary" class="change-password-btn" @click="openPasswordDialog">
                <el-icon class="btn-icon"><Lock /></el-icon>
                <span>修改密码</span>
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="personal-right">
        <div class="avatar-section">
          <div class="avatar-preview">
            <div class="avatar-hover-wrapper" @mouseenter="avatarHover = true" @mouseleave="avatarHover = false" @click="openAvatarDialog">
              <div class="avatar-glow"></div>
              <img v-if="form.avatar" :src="form.avatar" class="avatar" />
              <el-icon v-else class="avatar-default"><User /></el-icon>
              <div v-if="avatarHover" class="avatar-mask">
                <el-icon class="mask-icon"><Camera /></el-icon>
                <span>更换头像</span>
              </div>
            </div>
          </div>
          
          <div class="bio-preview">
            <div class="user-info-card">
              <div class="nickname-section">
                <svg viewBox="0 0 24 24" class="info-icon">
                  <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"/>
                </svg>
                <div class="nickname">{{ form.nickname || '未设置昵称' }}</div>
              </div>
              
              <div class="email-section">
                <svg viewBox="0 0 24 24" class="info-icon">
                  <path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.11,4 20,4Z"/>
                </svg>
                <div class="email">{{ form.email || '未绑定邮箱' }}</div>
              </div>
              
              <div class="bio-section">
                <svg viewBox="0 0 24 24" class="info-icon">
                  <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
                </svg>
                <div class="bio">{{ form.bio || '这个人很懒，什么都没写～' }}</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="smart-login-section">
          <el-button class="smart-login-btn" type="success" @click="smartLogin">
            <div class="btn-content">
              <svg viewBox="0 0 24 24" class="btn-icon">
                <path d="M17,7H22V17H17V19A1,1 0 0,0 18,20H20V22H17.5C16.95,22 16,21.55 16,21C16,21.55 15.05,22 14.5,22H12V20H14A1,1 0 0,0 15,19V5A1,1 0 0,0 14,4H12V2H14.5C15.05,2 16,2.45 16,3C16,2.45 16.95,2 17.5,2H20V4H18A1,1 0 0,0 17,5V7M2,7H13V9H4V15H13V17H2V7M20,9H17V15H20V9M7.5,13A0.5,0.5 0 0,1 7,12.5A0.5,0.5 0 0,1 7.5,12A0.5,0.5 0 0,1 8,12.5A0.5,0.5 0 0,1 7.5,13Z"/>
              </svg>
              <span>智慧珞珈登录</span>
              <div class="btn-shine"></div>
            </div>
          </el-button>
        </div>
        
        <el-dialog v-model="avatarDialogVisible" title="更换头像" width="400px" :close-on-click-modal="false" class="avatar-dialog">
          <div class="upload-section">
            <el-upload
              class="avatar-uploader-dialog"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleAvatarSelect"
            >
              <el-button type="primary" class="upload-btn">
                <el-icon class="btn-icon"><Upload /></el-icon>
                <span>选择图片</span>
              </el-button>
            </el-upload>
            
            <div v-if="avatarPreviewUrl" class="preview-section">
              <div class="preview-label">预览效果</div>
              <div class="preview-wrapper">
                <img :src="avatarPreviewUrl" class="preview-avatar" />
                <div class="preview-glow"></div>
              </div>
            </div>
          </div>
          
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="avatarDialogVisible = false" class="cancel-btn">
                <el-icon class="btn-icon"><Close /></el-icon>
                <span>取消</span>
              </el-button>
              <el-button type="primary" :disabled="!avatarFile" @click="confirmAvatarUpload" class="confirm-btn">
                <el-icon class="btn-icon"><Check /></el-icon>
                <span>确认上传</span>
              </el-button>
            </div>
          </template>
        </el-dialog>
        
        <!-- 密码修改对话框 -->
        <el-dialog v-model="passwordDialogVisible" title="修改密码" width="450px" :close-on-click-modal="false" class="password-dialog">
          <el-form ref="passwordFormRef" :model="dialogPwdForm" :rules="passwordRules" label-width="80px" class="password-dialog-form">
            <el-form-item label="新密码" prop="password">
              <el-input v-model="dialogPwdForm.password" type="password" maxlength="32" show-password 
                        class="custom-input" placeholder="请输入新密码">
                <template #prefix>
                  <el-icon class="input-prefix-icon"><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input v-model="dialogPwdForm.confirmPassword" type="password" maxlength="32" show-password 
                        class="custom-input" placeholder="请再次输入新密码">
                <template #prefix>
                  <el-icon class="input-prefix-icon"><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item label="验证码" prop="code">
              <div class="verification-group">
                <el-input v-model="dialogPwdForm.code" maxlength="6" 
                          class="custom-input verification-input" placeholder="请输入验证码">
                  <template #prefix>
                    <el-icon class="input-prefix-icon"><Key /></el-icon>
                  </template>
                </el-input>
                <el-button size="default" :disabled="codeSending || codeCountdown > 0" 
                           @click="sendCode" class="send-code-btn">
                  <el-icon class="btn-icon">
                    <component :is="codeCountdown > 0 ? 'Timer' : 'Message'" />
                  </el-icon>
                  <span v-if="codeCountdown === 0">发送验证码</span>
                  <span v-else>{{ codeCountdown }}s后重试</span>
                </el-button>
              </div>
            </el-form-item>
          </el-form>
          
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="passwordDialogVisible = false" class="cancel-btn">
                <el-icon class="btn-icon"><Close /></el-icon>
                <span>取消</span>
              </el-button>
              <el-button type="primary" @click="confirmPasswordUpdate" class="confirm-btn" :loading="passwordLoading">
                <el-icon class="btn-icon"><Check /></el-icon>
                <span>确认修改</span>
              </el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElForm, ElFormItem, ElInput, ElButton, ElUpload, ElMessage, ElDivider, ElDialog, ElDatePicker, ElIcon, ElRadio, ElRadioGroup } from 'element-plus'
import { User, Message, Lock, Key, Edit, Check, Camera, Upload, Close, Timer } from '@element-plus/icons-vue'
import { updateCommonDataApi,sendCodeApi,updatePasswordApi, updateAvatarApi } from '../../api/user'
import { useUserStore } from '../../stores/user'
import { useRouter } from 'vue-router'

const router = useRouter()
const userStore = useUserStore()
const infoEditMode = ref(false)

// 密码对话框相关
const passwordDialogVisible = ref(false)
const passwordLoading = ref(false)
const passwordFormRef = ref()

const dialogPwdForm = ref({
  password: '',
  confirmPassword: '',
  code: ''
})

// 密码表单验证规则
const passwordRules = {
  password: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 32, message: '密码长度应为6-32位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule: any, value: string, callback: any) => {
        if (value !== dialogPwdForm.value.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { len: 6, message: '验证码应为6位', trigger: 'blur' }
  ]
}

const form = ref<{
  id: string | number | null,
  avatar: string,
  nickname: string,
  email: string,
  gender: string,
  bio: string,
  birthday: string
}>({
  id: null,
  avatar: '',
  nickname: '',
  email: '',
  gender: '',
  bio: '',
  birthday: ''
})

const codeSending = ref(false)
const codeCountdown = ref(0)
let codeTimer: any = null
const avatarHover = ref(false)
const avatarDialogVisible = ref(false)
const avatarFile = ref<File|null>(null)
const avatarPreviewUrl = ref<string>('')

// 打开页面时从store获取用户信息
onMounted(() => {
  form.value.id = userStore.id
  form.value.nickname = userStore.nickname
  form.value.email = userStore.email
  form.value.gender = userStore.gender
  form.value.bio = userStore.bio
  form.value.birthday = userStore.birthday
  console.log('userStore.avatar:', userStore.avatar)
  form.value.avatar = userStore.avatar
})

//修改基本信息
function toggleInfoEdit() {
  if (infoEditMode.value) {
    // 保存个人信息逻辑
    if (!form.value.nickname || form.value.nickname.length < 2) {
      ElMessage.error('昵称至少2个字符')
      return
    }
    if (form.value.bio && form.value.bio.length > 100) {
      ElMessage.error('简介不能超过100个字符')
      return
    }
    // gender 校验可选
    if (form.value.id === null || isNaN(Number(form.value.id))) {
      ElMessage.error('用户ID无效，无法保存信息')
      return
    }
    const birthdayStr = form.value.birthday
  ? new Date(form.value.birthday).toISOString().slice(0, 10)
  : '';
    updateCommonDataApi(
      Number(form.value.id),
      form.value.nickname,
      form.value.gender,
      form.value.bio,
      birthdayStr,
      form.value.email,
      '' // luojiaAccount 视实际情况传递
    ).then(() => {
      // 保存到store
      userStore.nickname = form.value.nickname
      userStore.gender = form.value.gender
      userStore.bio = form.value.bio
      userStore.birthday = form.value.birthday
      ElMessage.success('个人信息已保存')
    }).catch(() => {
      ElMessage.error('保存失败')
    })
  }
  infoEditMode.value = !infoEditMode.value
}

function smartLogin() {
  router.push('/log/school-log/auto')
}

function openAvatarDialog() {
  avatarDialogVisible.value = true
}
function handleAvatarSelect(file: any) {
  if (file.raw) {
    avatarFile.value = file.raw
    avatarPreviewUrl.value = URL.createObjectURL(file.raw)
  }
}
async function confirmAvatarUpload() {
  if (!avatarFile.value) return
  try {
    if (form.value.id === null) {
      ElMessage.error('用户ID无效，无法上传头像')
      return
    }
    const res = await updateAvatarApi(form.value.id, avatarFile.value)
    if (res && res.data) {
      if (res.data.avatarURL) {
        form.value.avatar = res.data.avatarURL
        userStore.avatar = res.data.avatarURL
      } else {
        form.value.avatar = avatarPreviewUrl.value
      }
      ElMessage.success('头像已更新')
    } else {
      ElMessage.error('头像上传失败')
    }
    avatarDialogVisible.value = false
    avatarFile.value = null
    avatarPreviewUrl.value = ''
  } catch {
    ElMessage.error('头像上传失败')
    avatarDialogVisible.value = false
    avatarFile.value = null
    avatarPreviewUrl.value = ''
  }
}
function sendCode() {
  if (codeSending.value || codeCountdown.value > 0) return
  codeSending.value = true
  ElMessage.success('验证码已发送到邮箱！')
  codeCountdown.value = 60
  codeTimer = setInterval(() => {
    codeCountdown.value--
    if (codeCountdown.value <= 0) {
      clearInterval(codeTimer)
      codeSending.value = false
    }
  }, 1000)
}

// 打开密码修改对话框
function openPasswordDialog() {
  passwordDialogVisible.value = true
  // 重置表单
  dialogPwdForm.value = {
    password: '',
    confirmPassword: '',
    code: ''
  }
}

// 确认密码修改
async function confirmPasswordUpdate() {
  if (!passwordFormRef.value) return
  
  try {
    await passwordFormRef.value.validate()
    
    passwordLoading.value = true
    
    const res = await updatePasswordApi(form.value.email, dialogPwdForm.value.password, dialogPwdForm.value.code)
    
    ElMessage.success('密码修改成功')
    passwordDialogVisible.value = false
    
    // 重置表单
    dialogPwdForm.value = {
      password: '',
      confirmPassword: '',
      code: ''
    }
    
  } catch (error) {
    ElMessage.error('密码修改失败')
  } finally {
    passwordLoading.value = false
  }
}
</script>

<style scoped>
/* 外层容器样式 */
.flow-container {
  height: 100vh;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
}

/* 导入更优雅的字体 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

.personal-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 1200px;
  height: calc(100% - 40px);
  margin: 0 auto;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95));
  border-radius: 24px;
  box-shadow: 
    0 20px 60px rgba(162, 89, 236, 0.15),
    0 8px 32px rgba(91, 110, 225, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.2);
  padding: 48px 40px 40px 40px;
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}

.personal-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, 
    var(--primary-purple), 
    var(--primary-blue), 
    var(--primary-purple));
  animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

.personal-left {
  padding: 0;
  flex: 2.2;
  width: 100%;
  margin-right: 40px;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
}

.personal-left::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}

/* 自定义滚动条样式 */
.personal-left::-webkit-scrollbar {
  width: 8px;
}

.personal-left::-webkit-scrollbar-track {
  background: rgba(162, 89, 236, 0.1);
  border-radius: 4px;
}

.personal-left::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--primary-purple), var(--primary-blue));
  border-radius: 4px;
  transition: all 0.3s ease;
}

.personal-left::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
  position: relative;
}

.header-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary-purple), var(--primary-blue));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  box-shadow: 0 8px 24px rgba(162, 89, 236, 0.3);
  position: relative;
  overflow: hidden;
}

.header-icon::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: translateX(-100%);
  animation: shine 2s ease-in-out infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

.header-icon .icon {
  width: 24px;
  height: 24px;
  fill: white;
  z-index: 2;
  position: relative;
}

.section-header h2 {
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary-purple), var(--primary-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  flex: 1;
}

.header-decoration {
  margin-left: auto;
}

.floating-dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
  animation: sparkle 2.5s ease-in-out infinite;
}

.dot::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: inherit;
  opacity: 0.3;
  animation: pulse 2.5s ease-in-out infinite;
}

.dot-1 {
  background: var(--primary-purple);
  animation-delay: 0s;
}

.dot-1::before {
  animation-delay: 0s;
}

.dot-2 {
  background: var(--primary-blue);
  animation-delay: 0.8s;
}

.dot-2::before {
  animation-delay: 0.8s;
}

.dot-3 {
  background: var(--primary-purple);
  animation-delay: 1.6s;
}

.dot-3::before {
  animation-delay: 1.6s;
}

.dot-4 {
  background: var(--primary-blue);
  animation-delay: 2.4s;
}

.dot-4::before {
  animation-delay: 2.4s;
}

.dot-5 {
  background: var(--primary-purple);
  animation-delay: 3.2s;
}

.dot-5::before {
  animation-delay: 3.2s;
}

@keyframes sparkle {
  0%, 100% { 
    transform: scale(1) rotate(0deg); 
    opacity: 0.8; 
  }
  25% { 
    transform: scale(1.3) rotate(90deg); 
    opacity: 1; 
  }
  50% { 
    transform: scale(0.8) rotate(180deg); 
    opacity: 0.6; 
  }
  75% { 
    transform: scale(1.1) rotate(270deg); 
    opacity: 0.9; 
  }
}

@keyframes pulse {
  0%, 100% { 
    transform: scale(0.8); 
    opacity: 0; 
  }
  50% { 
    transform: scale(1.5); 
    opacity: 0.3; 
  }
}

.personal-info-panel {
  margin-top: 0;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  margin-bottom: 40px;
}

.personal-form {
  width: 100%;
}

.form-item-with-icon {
  margin-bottom: 24px;
}

.label-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
}

.label-icon {
  width: 18px;
  height: 18px;
  fill: var(--primary-purple);
  opacity: 0.8;
}

.custom-input {
  border-radius: 12px;
  transition: all 0.3s ease;
}

.custom-input:focus-within {
  box-shadow: 0 0 0 2px rgba(162, 89, 236, 0.2);
  transform: translateY(-1px);
}

.input-prefix-icon {
  color: var(--primary-purple);
  opacity: 0.7;
}

.custom-textarea {
  border-radius: 12px;
  transition: all 0.3s ease;
}

.custom-textarea:focus-within {
  box-shadow: 0 0 0 2px rgba(162, 89, 236, 0.2);
  transform: translateY(-1px);
}

.custom-radio-group {
  display: flex;
  gap: 24px;
}

.custom-radio {
  border: 2px solid var(--border-light);
  border-radius: 12px;
  padding: 12px 20px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.8);
}

.custom-radio:hover {
  border-color: var(--primary-purple);
  background: rgba(162, 89, 236, 0.05);
  transform: translateY(-1px);
}

.radio-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.radio-icon {
  width: 16px;
  height: 16px;
  fill: var(--primary-purple);
  opacity: 0.7;
}

.custom-date-picker {
  border-radius: 12px;
}

.action-item {
  margin-top: 32px;
  margin-bottom: 0;
}

.action-btn {
  background: linear-gradient(135deg, var(--primary-purple), var(--primary-blue));
  border: none;
  border-radius: 14px;
  padding: 14px 32px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 24px rgba(162, 89, 236, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.action-btn.edit-btn {
  min-width: 120px; /* 可根据需要调整宽度 */
  width: 120px;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.6s ease;
}

.action-btn:hover::before {
  left: 100%;
}

.action-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 40px rgba(162, 89, 236, 0.4);
}

.btn-icon {
  margin-right: 8px;
  color: #fff !important;
}

.section-divider {
  display: flex;
  align-items: center;
  margin: 40px 0 32px 0;
  position: relative;
}

.divider-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  box-shadow: 0 6px 20px rgba(91, 110, 225, 0.3);
}

.divider-icon .icon {
  width: 20px;
  height: 20px;
  fill: white;
}

.section-divider span {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-right: 20px;
}

.divider-line {
  flex: 1;
  height: 5px; /* 原为2px，延长为5px，可根据需要调整更大 */
  background: linear-gradient(90deg, var(--primary-blue), var(--primary-purple), transparent);
  border-radius: 1px;
}

.password-section {
  margin-bottom: 40px;
}

.password-info {
  display: flex;
  justify-content: center;
}

.password-card {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(162, 89, 236, 0.1);
  transition: all 0.3s ease;
}

.password-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(162, 89, 236, 0.15);
}

.password-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(91, 110, 225, 0.3);
  flex-shrink: 0;
}

.password-icon .icon {
  width: 24px;
  height: 24px;
  fill: white;
}

.password-text {
  flex: 1;
}

.password-text h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.password-text p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.change-password-btn {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
  border: none;
  border-radius: 14px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 20px rgba(91, 110, 225, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.change-password-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.6s ease;
}

.change-password-btn:hover::before {
  left: 100%;
}

.change-password-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 28px rgba(91, 110, 225, 0.4);
}

.password-dialog {
  border-radius: 20px;
  overflow: hidden;
}

.password-dialog-form {
  padding: 10px 0;
}

.password-dialog .verification-group {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.password-dialog .verification-input {
  flex: 1;
}

.password-dialog .send-code-btn {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
  border: none;
  border-radius: 12px;
  padding: 0 20px;
  font-weight: 600;
  color: white;
  transition: all 0.3s ease;
  white-space: nowrap;
  min-width: 120px;
}

.password-dialog .send-code-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(91, 110, 225, 0.3);
}

.password-dialog .send-code-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.personal-right {
  flex: 1.8;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 40px;
  border-left: 2px solid rgba(162, 89, 236, 0.2);
  position: relative;
  height: 100%; /* 新增：让右侧区域高度100% */
}

.personal-right::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--primary-purple), var(--primary-blue));
  border-radius: 1px;
}

.avatar-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-preview {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-hover-wrapper {
  position: relative;
  width: 160px;
  height: 160px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.avatar-hover-wrapper:hover {
  transform: translateY(-4px);
}

.avatar-glow {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: conic-gradient(from 0deg, var(--primary-purple), var(--primary-blue), var(--primary-purple));
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: rotate 3s linear infinite;
}

.avatar-hover-wrapper:hover .avatar-glow {
  opacity: 0.3;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.8);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 12px 40px rgba(162, 89, 236, 0.2);
  position: relative;
  z-index: 2;
}

.avatar-default {
  width: 160px;
  height: 160px;
  font-size: 90px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-secondary), rgba(162, 89, 236, 0.1));
  border: 4px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 12px 40px rgba(162, 89, 236, 0.2);
  position: relative;
  z-index: 2;
}

.avatar-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 160px;
  background: linear-gradient(135deg, rgba(162, 89, 236, 0.9), rgba(91, 110, 225, 0.9));
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border-radius: 50%;
  z-index: 3;
  transition: all 0.3s ease;
  user-select: none;
  gap: 8px;
}

.mask-icon {
  font-size: 24px;
}

.bio-preview {
  width: 100%;
  margin-bottom: 32px;
}

.user-info-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(162, 89, 236, 0.1);
}

.nickname-section,
.email-section,
.bio-section {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.bio-section {
  margin-bottom: 0;
}

.info-icon {
  width: 20px;
  height: 20px;
  fill: var(--primary-purple);
  opacity: 0.8;
  margin-top: 2px;
  flex-shrink: 0;
}

.nickname {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--primary-purple), var(--primary-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
}

.email {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.4;
}

.bio {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-style: italic;
  opacity: 0.8;
}

.smart-login-section {
  width: 100%;
  margin-top: auto;
  /* 增加按钮和下边界的距离 */
  margin-bottom: 60px;
}

.smart-login-btn {
  width: 100%;
  height: 56px;
  background: linear-gradient(135deg, #67c23a, #85ce61);
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 8px 24px rgba(103, 194, 58, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.btn-content .btn-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.btn-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.smart-login-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 40px rgba(103, 194, 58, 0.4);
}

.smart-login-btn:hover .btn-shine {
  transform: translateX(100%);
}

/* Dialog样式 */
.avatar-dialog {
  border-radius: 20px;
  overflow: hidden;
}

.upload-section {
  text-align: center;
  padding: 20px 0;
}

.avatar-uploader-dialog {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.upload-btn {
  background: linear-gradient(135deg, var(--primary-purple), var(--primary-blue));
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-section {
  margin-top: 24px;
}

.preview-label {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  font-weight: 500;
}

.preview-wrapper {
  position: relative;
  display: inline-block;
}

.preview-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(162, 89, 236, 0.3);
  box-shadow: 0 8px 24px rgba(162, 89, 236, 0.2);
}

.preview-glow {
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  background: conic-gradient(from 0deg, var(--primary-purple), var(--primary-blue), var(--primary-purple));
  border-radius: 50%;
  opacity: 0.3;
  z-index: -1;
  animation: rotate 3s linear infinite;
}

.dialog-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.cancel-btn,
.confirm-btn {
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cancel-btn {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text-secondary);
}

.confirm-btn {
  background: linear-gradient(135deg, var(--primary-purple), var(--primary-blue));
  border: none;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .personal-container {
    width: 95%;
    flex-direction: column;
    gap: 32px;
  }
  
  .personal-left {
    margin-right: 0;
  }
  
  .personal-right {
    padding-left: 0;
    border-left: none;
    border-top: 2px solid rgba(162, 89, 236, 0.2);
    padding-top: 32px;
    width: 100%;
  }
  
  .personal-right::before {
    display: none;
  }
  
  .verification-group {
    flex-direction: column;
    gap: 12px;
  }
  
  .send-code-btn {
    min-width: auto;
  }
}

@media (max-width: 768px) {
  .personal-container {
    padding: 32px 20px;
  }
  
  .section-header {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .header-decoration {
    margin-left: 0;
  }
  
  .personal-info-panel,
  .password-card {
    padding: 24px 20px;
  }
  
  .password-card {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .password-text h3 {
    font-size: 16px;
  }
  
  .custom-radio-group {
    flex-direction: column;
    gap: 12px;
  }
  
  .avatar-hover-wrapper,
  .avatar,
  .avatar-default,
  .avatar-mask {
    width: 120px;
    height: 120px;
  }
  
  .avatar-default {
    font-size: 60px;
  }
}

/* Element Plus 组件样式覆盖 */
:deep(.el-form-item__label) {
  line-height: 1.5;
  font-weight: 600;
  color: var(--text-primary);
}

:deep(.el-input__wrapper) {
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 1px solid rgba(162, 89, 236, 0.2);
}

:deep(.el-input__wrapper:hover) {
  border-color: var(--primary-purple);
}

:deep(.el-input__wrapper.is-focus) {
  border-color: var(--primary-purple);
  box-shadow: 0 0 0 2px rgba(162, 89, 236, 0.2);
}

:deep(.el-textarea__inner) {
  border-radius: 12px;
  border: 1px solid rgba(162, 89, 236, 0.2);
  transition: all 0.3s ease;
}

:deep(.el-textarea__inner:hover) {
  border-color: var(--primary-purple);
}

:deep(.el-textarea__inner:focus) {
  border-color: var(--primary-purple);
  box-shadow: 0 0 0 2px rgba(162, 89, 236, 0.2);
}

:deep(.el-radio) {
  margin-right: 0;
  border: none;
  background: transparent;
}

:deep(.el-radio.is-checked .el-radio__input .el-radio__inner) {
  background-color: var(--primary-purple);
  border-color: var(--primary-purple);
}

:deep(.el-radio__input .el-radio__inner:hover) {
  border-color: var(--primary-purple);
}

:deep(.el-date-editor.el-input) {
  border-radius: 12px;
}

:deep(.el-dialog) {
  border-radius: 20px;
  overflow: hidden;
}

:deep(.el-dialog__header) {
  background: linear-gradient(135deg, var(--primary-purple), var(--primary-blue));
  color: white;
  padding: 20px;
}

:deep(.el-dialog__title) {
  color: white;
  font-weight: 700;
}

:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: white;
}
</style>
